<template>
  <el-dialog
    title="增加批次"
    :visible.sync="visible"
    :close-on-click-modal="false"
    width="460px"
  >
    <el-form ref="form" :model="form" label-width="50px">
      <el-form-item label="文件" :rules="[{required: true, message: ' '}]">
        <el-upload
          ref="upload"
          action=""
          :auto-upload="false"
          :limit="1"
          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
          :on-remove="onUploadRemove"
          :on-change="onUploadChange"
        >
          <el-button slot="trigger" type="primary" plain>选取文件</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item prop="title" label="标题" :rules="[{required: true, message: ' '}]">
        <el-input v-model="form.title" style="width:360px" />
      </el-form-item>
      <el-form-item prop="logDate" label="日期" :rules="[{required: true, message: ' '}]">
        <el-date-picker
          v-model="form.logDate"
          type="month"
          value-format="yyyyMM"
          style="width:360px"
        />
      </el-form-item>
      <el-form-item prop="note" label="备注">
        <el-input v-model.trim="form.note" type="textarea" style="width:360px" />
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button
        type="success"
        icon="el-icon-check"
        :disabled="state == null"
        :loading="state == 'checking'"
        @click="onCheckMatchClick"
      >
        检查匹配
      </el-button>
      <el-button
        type="primary"
        icon="el-icon-plus"
        :disabled="state != 'submit'"
        :loading="submitting"
        @click="onSubmitClick"
      >
        提交
      </el-button>
      <el-button type="default" @click="visible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import Vue from 'vue';
import moment from 'moment';

export default {
  data() {
    return {
      visible: false,
      submitting: false,
      form: {},
      state: null,
    };
  },
  methods: {
    show(options) {
      this.visible = true;
      this.form.logDate = new Date();
      this.state = null;
      this.submitting = false;
      this.options = options;
      if (this.$refs.upload) {
        this.$refs.upload.clearFiles();
      }
    },
    async onCheckMatchClick() {
      this.state = 'checking';
      let formData = new FormData();
      formData.append('file', this.form.file);
      const result = (await this.$http.create().post('/api/grant/batch/match', formData)).data;
      import('./MatchReportDialog').then(m => {
        let matchReportDialog = new Vue(m.default);
        this.$el.parentElement.appendChild(matchReportDialog.$mount().$el);
        matchReportDialog.show(result, this.form.file);
      });
      if (result.matchingNum > 0) {
        this.state = 'submit';
      } else {
        this.state = 'check';
      }
    },
    onSubmitClick() {
      let { file } = this.form;
      if (!file) {
        return;
      }

      this.$refs.form.validate(async (valid) => {
        if (!valid) return;
        this.submitting = true;
        let formData = new FormData();
        let form = {...this.form};
        form.logDate = moment(form.logDate).format('YYYYMM');
        for (let key in form) {
          formData.append(key, form[key]);
        }
        const result = (await this.$http.create().post('/api/grant/batch/save', formData)).data;
        this.submitting = false;
        if (result.success) {
          this.visible = false;
          this.$message.success('增加成功');
          this.options.onSuccess();
        } else {
          this.$message.error(ret.message);
        }
      });

    },
    onUploadRemove() {
      this.form.file = null;
    },
    onUploadChange(file) {
      if (file.status == 'ready') {
        this.state = 'check';
        this.form.file = file.raw;
      }
    }
  }
}

</script>
